<template>
  <fieldset>
    <legend>常用api</legend>
    <h1>data:{{msg}}</h1>
    <input type="text"
           ref="ipt">
    <button @click="handleClick">点击</button>
    <child ref="child"></child>
    <h2 id="hh2"
        ref='hh2'>{{msg1}}</h2>
    <button @click="change">点击修改</button>
  </fieldset>
</template> 
<script>
  import child from "./child.vue"
  //ref 
  //1.如果ref作用在dom元素上,那么可以获取元素的真实dom
  //2.如果ref作用在子组件上,可以获取子组件实例的引用,可以实现组件的父子&子父传值,和普通的$on $emit传参有区别,没有基于发布订阅模式,平常如果传值依旧推荐使用$emit 和 $on
  //$root 获取根组件的实例  
  //$parent 获取父组件的实例,可以链式调用,也可以修改父实例的属性,并且视图会响应,相当于子传父的过程
  //provide inject 用于实现跨组件传参
  //$nextTick 用于获取更新之后的dom
  export default {
    data() {
      return {
        msg: "父实例",
        msg1: '通往世界杯的道路上充满挑战'
      }
    },
    methods: {
      handleClick() {
        //获得焦点的方法 xxx.foucs() xxx必须是一个dom元素
        // console.log(this.$refs.child.msg="李雷");
        this.$refs.ipt.style.color = "hotpink"
        this.$refs.ipt.focus()
      },
      change() {
        console.log(this.$refs.hh2.innerText);
        // console.log(document.getElementById("hh2").innerText);
        this.msg1 = '只有应战，才能去挑战'
        // console.log(this.$refs.hh2.innerText);
        // console.log(document.getElementById('hh2').innerText);

        // this.$nextTick(function () {
        //   console.log(this.$refs.hh2.innerText);
        // })

        //setTimeout就是原理之一
        setTimeout(() => {
          console.log(this.$refs.hh2.innerText);
        })
      }
    },
    components: {  
      child
    }
  }
</script> 